<template>
    <div class="outContainer" :style="'width:'+width+'px'">
        <div class="topLineBox">
            <!-- <div class="line lineGray"></div> -->
            <div class="line lineBlue" :style="'width:'+((itemData.blueNum/itemData.list.length)*100)+'%'"></div>
            <div class="line lineGreen" :style="'width:'+((itemData.greenNum/itemData.list.length)*100)+'%'"></div>
            <div class="line lineYellow" :style="'width:'+((itemData.yellowNum/itemData.list.length)*100)+'%'"></div>
        </div>
        <div class="contentBox">
            <div class="topTitleBox" v-if="!isShowSearch">
                <div class="titleBox">
                    <div class="title" @click="goTaskList(itemData)">{{ itemData.name }}</div>
                    <div class="searchBtn" @click="isShowSearch = true">
                        <img class="searchIcon" src="../../../assets/icon/searchIcon.png" alt="">
                    </div>
                </div>
                <div class="addBtnBox" @click="add">
                    <div class="addBtnName">{{ itemData.addName }}</div>
                    <img class="addIcon" src="../../../assets/icon/addIcon.svg" alt="">
                </div>
            </div>
            <div class="topTitleBox" v-else>
                <div class="searchBox">
                    <div class="searchIconBox">
                        <img class="searchIconIn" src="../../../assets/icon/searchIcon.png" alt="">
                    </div>
                    <el-input class="inp" :placeholder="itemData.searchPlaceholder" @blur="search" v-model="searchContent">
                        
                    </el-input>
                    <i style="font-size: 20px;" @click="clear" class="el-icon-circle-close"></i>
                </div>
            </div>
        </div>
        <div class="listOutBox" :id="itemData.nameValue">
            <div class="listBox" v-for="(item,index) in itemData.list" :key="index" @click="goDetail(itemData,item)">
                <div class="status">{{ item.statusName }}</div>
                <div class="itemTitle">{{ item.title }}</div>
                <div class="tagsBox">
                    <div class="tag" v-for="(itemIn,indexIn) in item.tags" :key="indexIn" :class="'tagType'+itemIn.type">{{ itemIn.name }}</div>
                </div>
                <div class="contentItemBox">
                    <div class="contentItem"  v-for="(itemIn,indexIn) in item.list" :key="indexIn">
                        <div class="contentItemTitle">{{ itemIn.name }}</div>
                        <div class="contentItemDes">{{ itemIn.content }}</div>
                    </div>
                </div>
                <div class="bottomBox">
                    <div class="timeBox">
                        <img class="timeIcon" src="../../../assets/icon/timeIcon.png" alt="">
                        <div class="time">{{ item.time }}</div>
                    </div>
                    <div class="nameBox">{{ item.userName }}</div>
                </div>
            </div>
            <div class="loadingBox">
                <div class="loading" v-if="itemData.isLoading&&!itemData.isBottom" :id="itemData.nameValue+'loader'"><i class="el-icon-loading"></i>加载中</div>
                <div class="loading2" v-if="itemData.isBottom" :id="itemData.nameValue+'loader'">没有更多了</div>
            </div>
        </div>
    </div>
</template>
<script>
import {openFlowCard} from "joys-ui/src/components/lib/OpenFlowCard"
export default {
    props:{
        itemData:Object,
        width:String
    },
    data(){
        return {
            isShowSearch:false,
            searchContent:''
        }
    },
    mounted(){
        this.loadMore()
    },
    methods:{
        loadMore(){
            var content = document.getElementById(this.itemData.nameValue);
            let that = this
            content.addEventListener('scroll', function() {
                console.log(content.scrollTop + content.clientHeight >= content.scrollHeight - 5)
                if (content.scrollTop + content.clientHeight >= content.scrollHeight - 5 && !that.itemData.isLoading) { // 当距离底部5px时加载更多
                    that.$emit('loadMore',that.itemData)
                }
            });
        },
        search(){
            console.log('search')
            setTimeout(() => {
                console.log(this.searchContent)
                this.$emit('search',this.searchContent,this.itemData.nameValue)
            }, 200);
        },
        clear(){
            this.searchContent = ''
            this.isShowSearch = false
        },
        goDetail(itemData,item){
            this.$emit('goDetail',itemData,item)
        },
        add(){
            this.$emit('goAdd',this.itemData)
        },
        goTaskList(itemData){
            console.log(itemData.linkData)
            this.$bus.sendMessage("OPEN_APPLET", itemData.linkData)
        }
    }
}
</script>
<style>
/* 清除 el-input 的边框样式 */
.searchBox .el-input__inner {
  border: none !important; /* 使用 !important 来确保覆盖默认样式 */
  box-shadow: none !important; /* 清除阴影 */
}
 
/* 如果需要，还可以添加自定义的边框样式 */
.searchBox .el-input__inner:focus {
  outline: none; /* 清除聚焦时的轮廓 */
  border: none; /* 自定义边框颜色 */
}
</style>
<style scoped>
    .outContainer{
        height: 650px;
        border-radius: 5px;
        margin-right: 24px;
        background: #FFFFFF;
        box-shadow: 0px 0px 10px 0px #D2D7E0;
        overflow: hidden;
        
    }
    .contentBox{
        padding: 0 12px;
    }
    .topLineBox{
        height: 4px;
        display: flex;
    }
    .lineBlue{
        background: #6294EE;
    }
    .lineGreen{
        background: #5CD098;
    }
    .lineYellow{
        background: #FFD129;
    }
    .topTitleBox{
        height: 32px;
        margin-top: 14px;
        margin-bottom: 14px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .titleBox{
        display: flex;
        align-items: center;
    }
    .title{
        font-size: 18px;
        line-height: 25px;
        color: #596992;
        margin-right: 8px;
        cursor: pointer;
        transition: all 0.3s;
    }
    .title:hover{
        color: #4C78FF;
    }
    .searchBtn{
        width: 32px;
        height: 32px;
        border-radius: 6px;
        cursor: pointer;
        display: flex;
        align-items: center;
        user-select: none;
        justify-content: center;
        transition: all 0.3s;
    }
    .searchBtn:hover{
        background: #F6F8FA;
    }
    .searchIcon{
        width: 16px;
        height: 16px;
    }
    .addBtnBox{
        display: flex;
        align-items: center;
        cursor: pointer;
    }
    .addBtnName{
        font-size: 15px;
        line-height: 22px;
        color: #8b8ba1;
        margin-right: 8px;
    }
    .addIcon{
        width: 16px;
        height: 16px;
        user-select: none;
    }
    .searchBox{
        height: 32px;
        border-radius: 5px;
        flex: 1;
        display: flex;
        overflow: hidden;
        align-items: center;
    }
    .searchIconBox{
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .searchIconIn{
        width: 18px;
        height: 18px;
    }
    .inp{
        font-size: 14px;
        flex: 1;
    }
    .listOutBox{
        height: 566px;
        padding: 0 12px;
        overflow: auto;
    }
    .listBox{
        height: 277px;
        border-radius: 5px;
        background: #F8F9FB;
        border: 1px solid #EEEFF4;
        padding: 16px 16px 0 16px;
        margin-bottom: 16px;
        cursor: pointer;
    }
    .status{
        font-size: 12px;
        font-weight: 500;
        border-radius: 5px;
        color: #FFFFFF;
        display: inline-block;
        line-height: 22px;
        padding: 0 16px;
        text-align:center;
        background: linear-gradient(109deg, #578BEB 3%, #65B6F7 116%);
    }
    .itemTitle{
        font-size: 16px;
        line-height: 20px;
        color: rgba(17, 19, 56, 0.85);
        margin-top: 12px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .listBox:hover .itemTitle{
        
    }
    .tagsBox{
        display: flex;
        margin-top: 12px;
    }
    .tag{
        border-radius: 2px;
        background: #F6FFED;
        padding: 0 8px;
        box-sizing: border-box;
        line-height: 22px;
        font-size: 12px;
        text-align: center;
        margin-right: 8px;
    }
    .tagType1{
        color: #52C41A;
        border: 1px solid #B7EB8F;
        background: #F6FFED;
    }
    .tagType2{
        color: #1890FF;
        border: 1px solid #91D5FF;
        background: #E6F7FF;
    }
    .contentItemBox{
        padding-top: 3px;
    }
    .contentItem{
        display: flex;
        margin-top: 10px;
    }
    .contentItemTitle{
        font-size: 12px;
        line-height: 17px;
        color: #9898AE;
    }
    .contentItemDes{
        font-size: 12px;
        line-height: 17px;
        color: rgba(0, 0, 0, 0.85);
    }
    .bottomBox{
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 32px;
        margin-top: 16px;
    }
    .timeBox{
        display: flex;
        align-items: center;
    }
    .timeIcon{
        width: 12px;
        height: 12px;
        margin-right: 8px;
        user-select: none;
    }
    .time{
        font-size: 12px;
        line-height: 17px;
        color: #9898AE;
    }
    .nameBox{
        line-height: 32px;
        border-radius: 4px 14px 14px 14px;
        background: #FEEFD4;
        text-align: center;
        color: #EDA43F;
        padding: 0 6px;
        font-size: 12px;
    }
    .loadingBox{
        display: flex;
        align-items: center;
        justify-content: center;
        height: 20px;
    }
    .loading2{
        color: #9898AE;
    }
</style>
